<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
  </head>
  <body style="padding: 15px">
    <!-- 添加图书的panel面板 -->

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加新图书</h3>
      </div>
      <div class="panel-body form-inline">
        <div class="input-group">
          <div class="input-group-addon">书名</div>
          <input
            type="text"
            class="form-control"
            id="iptBookname"
            placeholder="请输入书名"
          />
        </div>
        <div class="input-group">
          <div class="input-group-addon">作者</div>
          <input
            type="text"
            class="form-control"
            id="iptAuthor"
            placeholder="请输入作者"
          />
        </div>
        <div class="input-group">
          <div class="input-group-addon">出版社</div>
          <input
            type="text"
            class="form-control"
            id="iptPublisher"
            placeholder="请输入出版社"
          />
        </div>
        <button id="btnAdd" class="btn btn-primary">添加</button>
      </div>
    </div>

    <!-- 图书的表格 -->

    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tb"></tbody>
    </table>
    <script>
      $(function () {
        const baseUrl = "http://www.liulongbin.top:3006";
        // 获取图书列表 向接口发送get请求
        function getBooklist() {
          $.ajax({
            type: "GET",
            url: baseUrl + "/api/getbooks",
            success: function (res) {
              if (res.status !== 200) return;
              // 创建一个空数据
              let rows = [];
              res.data.forEach((item) => {
                rows += `<tr>
                <td>${item.id}</td>
                <td>${item.bookname}</td>
                <td>${item.author}</td>
                <td>${item.publisher}</td>
                <td><a class='del' data-id='${item.id}' href='javascript:;'>删除</a></td>
                </tr>`;
              });
              // 将rows追加到tbody里面
              $("#tb").empty().append(rows);
            },
          });
        }
        getBooklist();
        // 删除事件 事件委托
        $("#tb").on("click", ".del", function () {
          let id = $(this).data("id");
          // 向接口发送get请求
          $.ajax({
            type: "GET",
            url: baseUrl + "/api/delbook",
            data: {
              id,
            },
            success: (res) => {
              if (res.status !== 200) return alert("删除失败");
              // 此处用箭头函数 this指向a链接
              $(this).parents("tr").remove();
              getBooklist();
            },
          });
        });
        // 添加事件
        $("#btnAdd").on("click", function () {
          let bookname = $("#iptBookname").val().trim();
          let author = $("#iptAuthor").val().trim();
          let publisher = $("#iptPublisher").val().trim();
          if (
            bookname.length <= 0 ||
            author.length <= 0 ||
            publisher.length <= 0
          ) {
            return alert("输入不合法");
          }
          $.ajax({
            type: "POST",
            url: baseUrl + "/api/addbook",
            data: {
              bookname,
              author,
              publisher,
            },
            success: (res) => {
              if (res.status !== 201) {
                return alert("添加失败");
              }
              getBooklist();
              $("#iptBookname").val("");
              $("#iptAuthor").val("");
              $("#iptPublisher").val("");
            },
          });
        });
      });
    </script>
  </body>
</html>
